<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebRTC - real World</title>
<style>
	video {
		width:320px;
		height:240px;
	}
</style>
</head>
<body>
	<div id="mbody">
		<div style="width:80%;float:left">
			<div>
				<video autoplay :src="localVideo" style="float:left"></video>
				<audio autoplay :src="localAudio" controls></audio>
				<input id="render" type="checkbox" v-model="renderlocal" />
				<label for="render" @click="rederlocalAudio">本地渲染</label>
				<div style="float:left">
					<ul>
						<li v-for="item of verbose">{{item}}</li>
					</ul>
				</div>
			</div>
			<div style="clear:both">
				<!-- <video autoplay :src="remoteVideo"></video> -->
				<video autoplay v-for="item of remoteVideo" :src="item">
			</div>
			<div>
		    	<button :disabled="enterBtn" @click="enter">加入房间</button>
		    	<button :disabled="sendBtn" @click="send">发送消息</button>
		    	<button :disabled="endBtn" @click="end">结束</button>
		    	<button @click="testecho">测试回音</button>
			</div>
		</div>
		<div style="width:20%;float:left">
			<ul>
				<li v-for="item of notice">{{item}}</li>
			</ul>
		</div>
	</div>
	
	<script src="//cdn.bootcss.com/vue/2.2.6/vue.js"></script>
	<script src="//cdn.bootcss.com/stomp.js/2.3.2/stomp.js"></script>
	<script src="//cdn.bootcss.com/sockjs-client/1.1.2/sockjs.js"></script>
	<script src="js/lib/adapter.js"></script>
	<script type="text/javascript" src="js/webaudioextended.js"></script>
	<script type="text/javascript" src="js/WebRTC_V4.js" ></script>
	<script type="text/javascript" src="js/real-world.js"></script>
</body>
</html>